<!DOCTYPE html>
<html lang="en" style="height:100%">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>完善信息</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../../css/yzl.css" />
	<link rel="stylesheet" type="text/css" href="../../css/sqc.css" />

	<style>
		html {
			height: 100%;
			background-color: #fff;
		}

		.input-center {
			margin: 0 auto;
			/*height: 60px;*/
			background: #F7F4F2;
			width: 100%;
			line-height: 40px;
		}

		input {
			width: 100%;
			/*line-height: 60px;*/
			outline: none;
			border-radius: 5px;
		}

		.regrist-button {
			margin-top: 50px;
			background: #ccc;
			cursor: pointer;
			border: none;
			font-size: 18px;
			display: block;
			width: 100%;
			margin-bottom: 10px;
			color: #fff;
			padding: 15px 0;
			border-radius: 4px;
			text-align: center;
			white-space: nowrap;
			font-weight: 400;
			line-height: 20px;
			position: relative;
			outline: none;
		}

		.register-btn {
			background: #33375E;
		}

		.input-center input {
			border: none;
		}

		.aui-checkbox {
			width: 16px;
			height: 16px;
			vertical-align: middle;
		}

		.v-enter,
		.v-leave-to {
			opacity: 0;
		}

		.v-enter-active,
		.v-leave-active {
			transition: opacity 1.5s;

		}
	</style>
</head>

<body style="background:#ffffff">
	<div id="blank" class="header">
		<div v-back.tapmode class="back"></div>
	</div>
	<div id="app" v-cloak style="margin:0 auto;padding-top:70px;width:90%">
		<div style="font-size:18px;font-weight:800;margin-top:40px">该微信还未绑定账户</div>
		<div style="margin-top:10px;margin-bottom: 10%;">请输入你的账户信息</div>
		<div class="warn-box clearfix">
			<span class="warn-title-left">请输入手机号</span>
			<span class="warn-title-right" v-show="warn_box">{{warn_title1}} <span style="color: #4040FD"	v-myclick="pwdlogin">{{warn_title3}}</span> </span>
			<input class="input" style="padding:1rem 5px;line-height:1.6rem" type="tel" v-model="phone"  required maxlength="11" />
		</div>

		<div class="warn-box clearfix " style="margin-top:10px">
			<span class="warn-title-left">请输入验证码</span>
			<span class="warn-title-right" v-show="warn_box">{{warn_title2}}</span>
		</div>

		<div class="input-center input-text" style="position:relative">
			<input type="tel" class="getcodecontent input-text" maxlength="6" v-model="verify_code" style="padding:1rem 5px;line-height:1.6rem"/>
			<sendcode @codemessage="codeMessage" :phone="phone" :type="codetype" style="position:absolute;right:0px;top:1.8rem">
			</sendcode>
		</div>

		<transition>
			<div class="warn-box clearfix" v-show="codeshow" style="margin-top:10px">
				<span class="warn-title-left">请输入邀请码</span>
				<span class="warn-title-right" v-show="warn_box">{{warn_title4}}</span>
				<input class="input" type="text" v-model="invite_code" style="padding:1rem 5px;line-height:1.6rem"/>
			</div>
		</transition>
		<!-- <div class="input-center">
      <input class="input" type="password" ref="text" placeholder="请输入邀请码(必填)" v-model="invite_code"  required />
      <div><span style="color:rgba(153,153,153,1);font-size:12px">邀请码用于关联用户身份关系。如您还没有邀请码，可以使用我们官方的邀请码：77889900</span></div>
  </div> -->
		<button v-myclick="login" type="button" v-show="codeshow" :class="{'register-btn':phone&&verify_code&&checkbox}"
			class="regrist-button">绑定</button>

		<button v-myclick="login1" type="button" v-show="!codeshow" :class="{'register-btn':phone&&verify_code&&checkbox}"
			class="regrist-button">绑定</button>

		<div style="margin-top:10px">
			<input class="aui-checkbox" type="checkbox" v-model="checkbox">
			我已阅读并同意<span style="color:#73C5EA" v-myclick="userAgreement">《扎堆注册协议》</span>
		</div>
	</div>
	<script src="../../script/api.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/app.js"></script>
	<script src="../../script/common.js"></script>
	<script src="../../script/url.js"></script>
	<script src="../../script/components.js"></script>
	<script type="text/javascript" src="../../script/jquery.js"></script>

	<script>

		var pageParam,
			vm;
		var talkingData;
		apiready = function () {
			setBSImg();
			new Vue({
				el: '#blank',
			});
			wap_url = getPrefs("wap_url");
			talkingData = api.require('talkingData');
			pageParam = api.pageParam;
			initApp();
			api.parseTapmode();
			addListeners();
		};

		function initApp() {
			var isBigImg = Vue.BSImg == 'big';
			vm = new Vue({
				el: '#app',
				data: {
					pageParam: pageParam,
					phone: '',
					verify_code: '',
					invite_code: '',
					codetype: 8,
					warn_title1: '',
					warn_title2: '',
					warn_title3: '',
					warn_title4: '',
					warn_box: true,
					codeshow: false,
					wap_url: wap_url,
					checkbox: true,
				},
				methods: {
					clearMessage: function() {
						this.phone = '';
						this.verify_code = '';
						this.invite_code =  '';
						this.codetype = 8;
						this.warn_title1 = '';
						this.warn_title2 = '';
						this.warn_title3 = '';
						this.warn_title4 = '';
						this.warn_box = true;
						this.codeshow = false;
						this.wap_url = wap_url;
						this.checkbox = true
					},
					codeMessage: function (message) {
						this.warn_box = true
						this.warn_title1 = '请输入正确的手机号'
					},
					pwdlogin: function () {
						openWin('../login/pwdLogin', { phone: vm.phone });
						vm.clearMessage()
					},
					userAgreement: function () {
						var url = this.wap_url + 'home/agreement';
						openWin('../home/browser', { url: url });
					},
					login: function () {
						if (!this.checkbox) {
							return false;
						}
						if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
							vm.warn_title1 = '请输入正确的手机号'
							vm.warn_box = true
							return
						}
						showProgress();
						var data = {
							oauth: this.pageParam.oauth,
							openid: this.pageParam.openid,
							unionid: this.pageParam.unionid ? this.pageParam.unionid : '',
							nickname: this.pageParam.nickname,
							sex: this.pageParam.sex,
							portrait: this.pageParam.portrait,
							phone: this.phone,
							verify_code: this.verify_code,
							invite_code: this.invite_code,
							jpush_token: getPrefs('jpush_token') || ''
						};
						if (hasPrefs('member_id')) {
							data.member_id = getPrefs('member_id');
						}
						var callback = function (ret) {
							// openWin('bindPassword',{phone: vm.phone})
							var user = ret.content;
							setPrefs('user', user);
							setPrefs('token', user.token);
							setPrefs('member_id', user.member_id);
							api.openWin({
								reload : true,
								name : 'bindPwd',
								url : 'bindPassword.html',
								vScrollBarEnabled : false,
								slidBackEnabled :false,
								pageParam: {
									phone: vm.phone
								}
							});
							vm.clearMessage()
						};
						var errback = function (err) {
							if(err.errcode == -101){
								if(err.message.indexOf('验证码') != -1){
								vm.warn_box = true
								vm.warn_title2 = err.message
								return
							}
								vm.warn_box = true
								vm.warn_title4 = err.message
								return
							}
							vm.warn_title2 = err.message
							vm.warn_box = true
						}
						pinet.post(URL.oauthRegister, data, callback, errback);
					},
					registerPhone: function () {
						var data = {
							oauth: this.pageParam.oauth,
							openid: this.pageParam.openid,
							unionid: this.pageParam.unionid ? this.pageParam.unionid : '',
							nickname: this.pageParam.nickname,
							sex: this.pageParam.sex,
							portrait: this.pageParam.portrait,
							phone: this.phone,
							verify_code: this.verify_code,
							invite_code: this.invite_code,
							jpush_token: getPrefs('jpush_token') || ''
						}
						var callback = function (ret) {
							// vm.login_init(ret.content);
						};
						var errback = function (err) {
							console.log(err.message)
							if (err.message.indexOf('已注册') != -1) {
								vm.codetype = 9;
								vm.codeshow = false;
								return false;
							}
							vm.codeshow = true;
						}
						pinet.post(URL.oauthRegister, data, callback, errback);
					},
					login1: function () {
						if (!this.checkbox) {
							return false;
						}
						
						showProgress();

						var data = {
							phone: this.phone,
							verify_code: this.verify_code,
							type: 9,
							jpush_token: getPrefs('jpush_token') || ''
						};

						if (hasPrefs('member_id')) {
							data.member_id = getPrefs('member_id');
						}
						var callback = function (ret) {
							vm.login_init(ret.content);
						};
						var errback = function (err) {
							if (err.message.indexOf('不正确的' != -1)) {
								vm.warn_title2 = '验证码错误'
								vm.warn_box = true
							}
						};
						pinet.post(URL.codelogin, data, callback, errback);
					},
					login_init: function (user) {
						
						setPrefs('user', user);
						setPrefs('token', user.token);
						setPrefs('member_id', user.member_id);
						var usermessage = vm.pageParam
						var data = {
							openid: usermessage.openid,
							token: user.token,
							member_id: user.member_id,
							oauth: 'Weixin',
							unionid: usermessage.unionid || ''	
						};
						var callback = function () {
							var user = JSON.parse(getPrefs('user'));
							user.wx_openid = usermessage.openid
							setPrefs('user', user);
							alert('绑定成功');
							if (user.is_set_pwd == 0) {
								api.openWin({
									reload : true,
									name : 'bindPwd',
									url : 'html/login/bindPassword.html',
									vScrollBarEnabled : false,
									slidBackEnabled :false,
								});
								vm.clearMessage()
							}
							openWin('wxwin', { headimgurl: usermessage.portrait, nickname: usermessage.nickname })
							vm.clearMessage()
							// openWin('../../index');
						};
						pinet.post(URL.oauthBind, data, callback);
					},
				},
				watch: {
					phone: function (phone) {
						if (this.phone.length < 10) {
							vm.warn_title1 = ''
							vm.warn_title2 = ''
							vm.warn_box = false
						}
						if (this.phone.length == 11) {
							vm.registerPhone()
						}
					},
					verify_code: function (num) {
						if (num.length < 6) {
							vm.warn_title1 = ''
							vm.warn_title2 = ''
							vm.warn_box = false
						}
					}
				}
			})
		}
		function addListeners() {
			// api.addEventListener({
			// 	name: 'viewdisappear'
			// }, function (ret, err) {
			// 	closeWin('setInfo');
			// });
		}

	</script>
</body>

</html>
